<template>
  <div>
    <ButtonGroup
      :options="buttons"
      class="button-container"
      @click="handleButtonClick"
    />
    <TableClue
      :columns="columns"
      :data-source="dataSource"
      :row-selection="rowSelectionMixin"
      :pagination="false"
      slot-name="contact.name1"
      @number-click="handleNumberClick"
    />
    <DialogSelectLinkman
      :visible.sync="visible"
      :leads-no="leadsNo"
      :opportunity-id="opportunityId"
      :customer-code="customerCode"
      :list="list"
      @fresh="getList"
    />
  </div>
</template>

<script>
import TableClue from '@/views/clue-creation/components/TableClue.vue';
import { postleadsContactList, postleadsContactDelete } from '@/api/clue';
import {
  postBusinessContactList,
  postBusinessContactDelete,
} from '@/api/business';
import mixinTable from '@/mixins/mixin-table.js';
import DialogSelectLinkman from '../../views/clue-creation/components/DialogSelectLinkman.vue';
export default {
  components: {
    DialogSelectLinkman,
    TableClue,
  },
  mixins: [mixinTable],
  props: {
    dataSource: {
      type: Array,
      default: () => [],
    },
    planId: {
      type: [String, Number],
      default: '',
    },
    leadsNo: {
      type: [String, Number],
      default: undefined,
    },
    opportunityId: {
      type: [String, Number],
      default: undefined,
    },
    customerCode: {
      type: [String, Number],
      default: '',
    },
    buttons: {
      type: [Array],
      default: () => [
        {
          key: 'relevance',
          type: 'primary',
          label: '关联联系人',
        },
        {
          key: 'delete',
          label: '删除',
          icon: 'delete',
        },
      ],
    },
  },
  data() {
    return {
      visible: false,
      list: [],
    };
  },
  computed: {
    rankOptions() {
      return this.$store.state.dictionary.dict['rank_code'] || {};
    },
    columns() {
      const columns = [
        {
          align: 'center',
          title: '序号',
          width: 60,
          customRender(t, r, index) {
            return parseInt(index) + 1;
          },
        },
        {
          align: 'center',
          title: '姓名',
          dataIndex: 'contact.name',
          scopedSlots: { customRender: 'contact.name' },
        },
        {
          align: 'center',
          title: '手机号码',
          dataIndex: 'contact.tel',
        },
        {
          align: 'center',
          title: '邮箱',
          dataIndex: 'contact.email',
        },
        {
          align: 'center',
          title: '部门',
          dataIndex: 'contact.department',
        },
        {
          align: 'center',
          title: '职位',
          dataIndex: 'contact.position',
        },
        {
          align: 'center',
          title: '职级',
          dataIndex: 'contact.rankCode',
          customRender: text => this.rankOptions[text],
        },
      ];
      return columns;
    },
  },
  watch: {},
  created() {
    this.getList();
  },
  methods: {
    // 获取联系人列表
    async getList() {
      if (this.opportunityId) {
        const res = await postBusinessContactList({
          opportunityId: this.opportunityId,
          status: '1',
        });
        console.log('1');
        this.dataSource = res.data.data;
      } else {
        const res = await postleadsContactList({
          leadsNo: this.leadsNo,
          status: '1',
        });
        this.dataSource = res?.data?.data || [];
      }
      this.list = this.dataSource;
    },
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
    relevanceCallback() {
      this.visible = true;
    },
    async deleteCallback() {
      const selectedRowKeys = this.rowSelectionMixin.selectedRowKeys || [];
      const checkedRows = this.dataSource.reduce((pre, cur) => {
        if (selectedRowKeys.includes(cur.id)) {
          pre.push(cur);
        }
        return pre;
      }, []);
      const ids = checkedRows.map(item => item.id);
      if (!ids.length) {
        this.$message.info(`请选择要删除的联系人，现有 ${ids.length} 条！`);
        return;
      }
      try {
        await this.$confirm(
          `是否删除该联系人？共 ${ids.length} 条，是否确认？`
        );
        if (this.opportunityId) {
          await postBusinessContactDelete(ids);
        } else {
          await postleadsContactDelete(ids);
        }
        this.$message.success('删除成功');
        this.rowSelectionMixin.selectedRowKeys = [];
        this.getList();
      } catch (error) {
        // console.log(error);
      }
    },
    // 编号点击
    handleNumberClick(record) {
      console.log('record:', record);
    },
  },
};
</script>

<style lang="less" scoped>
.log-container {
  width: 100%;
}
.item-container {
  display: flex;
  align-items: center;
}
.button-container {
  margin-bottom: 20px;
}
.table-container {
  margin-bottom: 40px;
}

/deep/ .poros-select-selection {
  border: none;
}
</style>
